<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            border: 1px solid #ccc;
            padding: 20px;
            background-color: #e3e3e3;
            margin: 10px;
        }
        .tableBox{
            width: 440px;
            margin: 10px;
            /* 合并边框 */
            border-collapse: collapse;
        }
        td{
            border: 1px solid #ccc;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="box">
        <p>学生信息录入</p>
            姓名：<input type="text" placeholder="请输入姓名" id="name"> <br>
            年龄：<input type="text" placeholder="请输入年龄" id="age"> <br>
            性别：<select name="" id="gender">
                     <option value="" style="display: none"></option>
                     <option value="0">女</option>
                     <option value="1">男</option>
                  </select> <br>
            手机：<input type="text" placeholder="请输入手机" id="phone"> <br>
            <button onclick="ensure()">确认提交</button>
    </div>


    <table class="tableBox" >
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>手机</td>
            <td>删除</td>
        </tr>

    </table>
   

    <script>
        let name = document.getElementById('name')
        let age = document.getElementById('age')
        let gender = document.getElementById('gender')
        let phone = document.getElementById('phone')
        let tableBox = document.querySelector('.tableBox')

        // 提交按钮
       const ensure = () => {
           if(!name.value || !age || !gender.value || !phone) return alert('请输入完整的信息')


        //    字符串转数组
           let arr = Array.of(name.value ,age.value ,gender.value==0?'女':'男' ,phone.value)

           let table_tr = document.createElement('tr')


        //    写在外面只会展示一条，所有的追加元素方法都会去判断父元素里是否有这个元素对象，如果有则以为已经添加完成，如果没有则添加进去，这也就是为什么只添加了一个元素的原因
        //    let table_td = document.createElement('td')


         let i= 0 ;

           arr.forEach(el=>{
            i++
            el = {id : Math.random().toFixed(4),info : el}
            // 需要写在内部 每次循环都重新创建
            let table_td = document.createElement('td')
            // el.info==0?el.info='女':el.info==1?el.info='男':''

            table_td.innerText = el.info
    
            table_tr.appendChild(table_td)


            if(i == arr.length ){
                let table_td = document.createElement('td')
                table_td.innerHTML = `<button onclick="deleteElement(${el.id})">删除</button>`
                table_tr.appendChild(table_td)
                table_tr.id = el.id
            }
      
           })

           tableBox.appendChild(table_tr)

        //    清空输入框数据
           name.value = ''
           age.value = ''
           gender.value = ''
           phone.value = ''

       }



    //    删除
    const deleteElement = (id) => {
        // 获取对应的那条dom
        let elDom = document.getElementById(id)
        // 删除自身
        elDom.remove()
    }
    </script>
</body>
</html>